<template>
  <div>
    <template v-if="!content|| content.length <=20">
      {{ content }}
    </template>
    <el-tooltip v-else placement="top" effect="dark">
      <template slot="content">
        <p style="max-width: 500px">{{ content }}</p>
      </template>
      <p>
        {{ `${content.slice(0,20)}...` }}
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
    name: 'Tooltip',
    props: {
        content: {
            type: String,
            default: ''
        }
    }
}
</script>
<style scoped lang="scss">
.el-tooltip{
  margin: 0;
}
</style>
